<template>
  <div class="doctor-schedule">
    <div class="date-range">
      {{ formatDateRange(dateRange) }}
    </div>
    <table class="schedule-table">
      <thead>
      <tr>
        <th>医生</th>
        <th>科室</th>
        <th>时间</th>
        <th v-for="(date, index) in dateRange" :key="index">
          {{ formatDay(date) }}<br>{{ formatDate(date) }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td :rowspan="3">{{ doctorName }}</td>
        <td :rowspan="3">{{ deptName }}</td>
        <td>上午</td>
        <td v-for="(schedule, index) in doctor.schedule" :key="'morning-' + index">
          <span
              v-if="schedule.morning === '值班'"
              style="font-weight:
              bold;color: rgb(151,42,42);">
            {{ schedule.morning }}
          </span>
          <span style="color: #00be4f"
                v-else>
            {{ schedule.morning }}
          </span>
        </td>
      </tr>
      <tr>
        <td>下午</td>
        <td v-for="(schedule, index) in doctor.schedule" :key="'afternoon-' + index">
          <span v-if="schedule.afternoon === '值班'"
                style="font-weight: bold;color: rgb(151,42,42);">{{ schedule.afternoon }}</span>
          <span style="color: #00be4f" v-else>{{ schedule.afternoon }}</span>
        </td>
      </tr>
      <tr>
        <td>晚上</td>
        <td v-for="(schedule, index) in doctor.schedule" :key="'evening-' + index">
          <span v-if="schedule.evening === '值班'" style="font-weight: bold;color: rgb(151,42,42);">{{
              schedule.evening
            }}</span>
          <span style="color: #00be4f" v-else>{{ schedule.evening }}</span>
        </td>
      </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  name: 'DoctorSchedule',
  props: {
    doctor: {
      type: Object,
      required: true,
    },
    dateRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      doctorName: '',
      deptName: '',
    };
  },
  mounted() {
    //加载医生名称和部门名称
    this.getDoctorName();
  },
  methods: {
    //加载医生名称和部门名称
    getDoctorName(doctorId) {
      this.$http.get('/user/info').then(response => {
        this.doctorName = response.data.data.userName;
        this.deptName = response.data.data.deptName;
      });
    },
// 格式化日期
    formatDate(date) {
      const options = {month: '2-digit', day: '2-digit'};
      return new Date(date).toLocaleDateString('zh-CN', options);
    },

// 格式化星期
    formatDay(date) {
      const options = {weekday: 'short'};
      return new Date(date).toLocaleDateString('zh-CN', options);
    },

// 格式化日期范围
    formatDateRange(dates) {
      const start = this.formatDate(dates[0]);
      const end = this.formatDate(dates[dates.length - 1]);
      return `${start} - ${end}`;
    },
  },

};
</script>

<style scoped>
.doctor-schedule {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.date-range {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

.schedule-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.schedule-table td {
  vertical-align: middle;
}
</style>
